<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="fruit"></div>

    <!-- 自定义属性 -->
    <script>
        var arr = [{
            id: 1,
            color: 'pink',
        }, {
            id: 2,
            color: 'lime',
        }, {
            id: 3,
            color: 'skyblue',
        }, ];
        //遍历数组forEach
        var ftag = '<ul>';
        arr.forEach(function(item, index) {
            console.log(item); //数组中的每一个对象
            ftag += '<li data-id="' + item.id + '">' + item.color + '</li>';
            var div = document.getElementById('fruit');
            div.innerHTML = ftag;
        });
        ftag += '</ul>';
        //点击每个li  打印对应的id
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function(e) {
            //e.target表示事件源
            // 所有data-xx的自定义属性 都可以用e.target.dataset.xx获取到
            console.log(e.target.dataset.id);
            // $(this).data('id')
        };
    </script>
</body>

</html>